<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="conn">连接服务器，实现实时通信</button>
  <button id="send">发送消息</button>

  <script>
    // 保存创建的 WebSocket 对象
    let ws = null

    document.querySelector('#conn').onclick = function() {
      // 创建 WebSocket 对象，指定连接的服务端地址及端口
      ws = new WebSocket('ws://127.0.0.1:8080', 'echo-protocol')
      ws.onopen = () => {
        console.log('已建立连接，可发送消息和接收消息...');
      }
      ws.onerror = (err) => {
        console.log('连接错误:', err);
      }

      // 接收服务端发送数据
      ws.onmessage = (event) => {
        // console.log('收到服务端消息:', event);
        // 处理服务端发送的数据
        const data = JSON.parse(event.data)
        console.log('订单：', data);
      }
    }

    document.querySelector('#send').onclick = function() {
      // 发送消息
      ws?.send('Hello World!')
    }
  </script>
</body>
</html>